<!doctype html>
<head>
  <meta charset="utf-8">
  <title>React D3 Components Examples</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://fb.me/react-with-addons-0.14.6.js"></script>
  <script src="https://fb.me/react-dom-0.14.6.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <script src="../dist/react-d3-components.js"></script>
</head>
<body>

    <div id="brush" class="brush"></div>
    <div id="barchart"></div>
    <div id="barchart2"></div>
    <div id="stackedbarchart"></div>
    <div id="groupedbarchart"></div>
    <div id="scatterplot"></div>
    <div id="scatterplot2"></div>
    <div id="scatterplot3"></div>
    <div id="scatterplot4"></div>
    <div id="linechart"></div>
    <div id="linechart2"></div>
    <div id="areachart"></div>
    <div id="areachart2"></div>
    <div id="stackedareachart"></div>
    <div id="piechart"></div>
    <div id="waveformchart"></div>

    <script type="text/jsx;harmony=true">
        var Waveform = ReactD3.Waveform;
        var BarChart = ReactD3.BarChart;
        var PieChart = ReactD3.PieChart;
        var AreaChart = ReactD3.AreaChart;
        var ScatterPlot = ReactD3.ScatterPlot;
        var LineChart = ReactD3.LineChart;
        var Brush = ReactD3.Brush;

        var tooltipLine = function(label, data) {
        return label + " x: " + data.x + " y: " + data.y;
        }

        var SomeComponent = React.createClass({
        getInitialState: function() {
        return {
        data: {
        label: '',
        values: [
        {x: new Date(2015, 2, 5), y: 1},
        {x: new Date(2015, 2, 6), y: 2},
        {x: new Date(2015, 2, 7), y: 0},
        {x: new Date(2015, 2, 8), y: 3},
        {x: new Date(2015, 2, 9), y: 2},
        {x: new Date(2015, 2, 10), y: 3},
        {x: new Date(2015, 2, 11), y: 4},
        {x: new Date(2015, 2, 12), y: 4},
        {x: new Date(2015, 2, 13), y: 1},
        {x: new Date(2015, 2, 14), y: 5},
        {x: new Date(2015, 2, 15), y: 0},
        {x: new Date(2015, 2, 16), y: 1},
        {x: new Date(2015, 2, 16), y: 1},
        {x: new Date(2015, 2, 18), y: 4},
        {x: new Date(2015, 2, 19), y: 4},
        {x: new Date(2015, 2, 20), y: 5},
        {x: new Date(2015, 2, 21), y: 5},
        {x: new Date(2015, 2, 22), y: 5},
        {x: new Date(2015, 2, 23), y: 1},
        {x: new Date(2015, 2, 24), y: 0},
        {x: new Date(2015, 2, 25), y: 1},
        {x: new Date(2015, 2, 26), y: 1}
        ]
        },
        xScale: d3.time.scale().domain([new Date(2015, 2, 5), new Date(2015, 2, 26)]).range([0, 400 - 70]),
        xScaleBrush: d3.time.scale().domain([new Date(2015, 2, 5), new Date(2015, 2, 26)]).range([0, 400 - 70])
        };
        },

        render: function() {

        return (
        <div>
            <LineChart
                data={this.state.data}
                width={400}
                height={400}
                margin={{top: 10, bottom: 50, left: 50, right: 20}}
                xScale={this.state.xScale}
                xAxis={{tickValues: this.state.xScale.ticks(d3.time.day, 2), tickFormat: d3.time.format("%m/%d")}}
                tooltipHtml={tooltipLine}
            />
            <div className="brush" style={{float: 'none'}}>
                <Brush
                    width={400}
                    height={50}
                    margin={{top: 0, bottom: 30, left: 50, right: 20}}
                    xScale={this.state.xScaleBrush}
                    extent={[new Date(2015, 2, 10), new Date(2015, 2, 12)]}
                    onChange={this._onChange}
                    xAxis={{tickValues: this.state.xScaleBrush.ticks(d3.time.day, 2), tickFormat: d3.time.format("%m/%d")}}
                />
            </div>
        </div>
        );
        },

        _onChange: function(extent) {
        this.setState({xScale: d3.time.scale().domain([extent[0], extent[1]]).range([0, 400 - 70])});
        }
        });

        ReactDOM.render(
        <SomeComponent/>,
        document.getElementById('brush')
        );

        var tooltip = function(x, y0, y, total) {
        return x + " " + y.toString();
        };

        var tooltipScatter = function(x, y) {
        return "x: " + x + " y: " + y;
        };

        var tooltipPie = function(x, y) {
        return x + ": " + y.toString();
        };

        var tooltipArea = function(y, cumulative, x, label) {
        return label + " Total: " + cumulative + " X: " + x + " Y: " + y;
        }

        var data = [{
        label: 'somethingA',
        values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}, {x: 'SomethingD', y: -3}]
        }];


        ReactDOM.render(
        <BarChart
            data={data}
            width={800}
            height={400}
            margin={{top: 10, bottom: 50, left: 50, right: 10}}
            tooltipHtml={tooltip}
            colorByLabel={false}
        />,
        document.getElementById('barchart')
        );


        var data = [{
        label: 'somethingA',
        values: []
        }];
        /* Absolute values of a sin waveform. We do expect only values within [0,1] */
        for(var i = 0; i<320; i++){
        data[0].values.push({x: ''+i, y: Math.abs(Math.sin(i/20))});
        }


        ReactDOM.render(
        <Waveform
            data={data}
            width={1400}
            height={200}
            colorScale={ d3.scale.linear()
            .domain([0,1400])
            .range(['#eb1785','#ff7b16'])}
        />,
        document.getElementById('waveformchart')
        );

        /*
        data = [{
        customLabel: 'somethingA',
        customValues: [['SomethingA', 10], ['SomethingB', 4], ['SomethingC', 3]]
        }];
        var labelAccessor = function(stack) { return stack.customLabel; };
        var valuesAccessor = function(stack) { return stack.customValues; };
        var xAccessor = function(element) { return element[0]; };
        var yAccessor = function(element) { return element[1]; };

        ReactDOM.render(
        <BarChart
            data={data}
            width={400}
            height={400}
            margin={{top: 10, bottom: 50, left: 50, right: 10}}
            tooltipHtml={tooltip}
            label={labelAccessor}
            x={xAccessor}
            y={yAccessor}
            values={valuesAccessor}
        />,
        document.getElementById('barchart2')
        );
        */
        data = [
        {
        label: 'somethingA',
        values: [
        {x: 'SomethingA', y: 10},
        {x: 'SomethingB', y: 4},
        {x: 'SomethingC', y: -3}
        ]
        },
        {
        label: 'somethingB',
        values: [
        {x: 'SomethingA', y: 5},
        {x: 'SomethingB', y: 8},
        {x: 'SomethingC', y: -5}
        ]
        },
        {
        label: 'somethingC',
        values: [
        {x: 'SomethingA', y: 6},
        {x: 'SomethingB', y: 7},
        {x: 'SomethingC', y: 5}
        ]
        }
        ];

        ReactDOM.render(
        <BarChart
            data={data}
            width={400}
            height={400}
            margin={{top: 10, bottom: 50, left: 50, right: 10}}
            tooltipHtml={tooltip}
            tooltipMode={'element'}
        />,
        document.getElementById('stackedbarchart')
        );

        ReactDOM.render(
        <BarChart
            data={data}
            width={400}
            height={400}
            margin={{top: 10, bottom: 50, left: 50, right: 10}}
            tooltipHtml={tooltip}
            tooltipMode={'mouse'}
            groupedBars
        />,
        document.getElementById('groupedbarchart')
        );

        data = {
        label: 'somethingA',
        values: [
        {x: 'SomethingA', y: 10},
        {x: 'SomethingB', y: 2},
        {x: 'SomethingC', y: 3},
        {x: 'SomethingD', y: 4},
        {x: 'SomethingE', y: 9},
        {x: 'SomethingF', y: 1},
        {x: 'SomethingG', y: 2},
        {x: 'SomethingH', y: 3},
        {x: 'SomethingI', y: 4},
        {x: 'SomethingJ', y: 2},
        {x: 'SomethingK', y: 1},
        {x: 'SomethingL', y: 3},
        {x: 'SomethingM', y: 4},
        {x: 'SomethingN', y: 2},
        {x: 'SomethingO', y: 1},
        {x: 'SomethingP', y: 3},
        {x: 'SomethingQ', y: 4},
        {x: 'SomethingR', y: 2},
        {x: 'SomethingS', y: 1},
        {x: 'SomethingT', y: 3},
        {x: 'SomethingU', y: 4},
        {x: 'SomethingV', y: 2},
        {x: 'SomethingW', y: 1},
        {x: 'SomethingX', y: 3},]
        };

        ReactDOM.render(<PieChart
                            data={data}
                            width={600}
                            height={400}
                            margin={{top: 10, bottom: 10, left: 100, right: 100}}
                            tooltipOffset={{top: 175, left: 200}}
                            tooltipHtml={tooltipPie}
                            tooltipMode={'fixed'}
                            sort={null}
                        />,
        document.getElementById('piechart')
        );

        data = [
        {
        label: 'somethingA',
        values: [
        {x: 0, y: 0},
        {x: 1.3, y: 5},
        {x: 3, y: 6},
        {x: 3.5, y: 6.5},
        {x: 4, y: 6},
        {x: 4.5, y: 6},
        {x: 5, y: 7},
        {x: 5.5, y: 8}
        ]
        },
        {
        label: 'somethingB',
        values: [
        {x: 0, y: 3},
        {x: 1.3, y: 4},
        {x: 3, y: 7},
        {x: 3.5, y: 8},
        {x: 4, y: 7},
        {x: 4.5, y: 7},
        {x: 5, y: 7.8},
        {x: 5.5, y: 9}
        ]
        }
        ];

        ReactDOM.render(<ScatterPlot
                            data={data}
                            width={400}
                            height={400}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            tooltipHtml={tooltipScatter}
                            xAxis={{innerTickSize: 6, label: "x-label"}}
                            yAxis={{label: "y-label"}}
                        />,
        document.getElementById('scatterplot2')
        );

        ReactDOM.render(<AreaChart
                            data={data}
                            width={400}
                            height={400}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            interpolate={"basis"}
                            tooltipHtml={tooltipArea}
                        />,
        document.getElementById('stackedareachart')
        );

        var dashFunc = function(label) {
        if (label == "somethingA") {
        return "4 4 4";
        }
        if (label == "somethingB") {
        return "3 4 3";
        }
        }

        var widthFunc = function(label) {
        if (label == "somethingA") {
        return "4";
        }
        if (label == "somethingB") {
        return "2";
        }
        }

        ReactDOM.render(<LineChart
                            data={data}
                            width={400}
                            height={400}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            tooltipHtml={tooltipLine}
                            tooltipContained
                            xAxis={{innerTickSize: 6, label: "x-label"}}
                            yAxis={{label: "y-label"}}
                            shapeColor={"red"}
                            stroke={{strokeDasharray: dashFunc, strokeWidth: widthFunc}}
                        />,
        document.getElementById('linechart')
        );

        data = [{
        label: 'somethingA',
        values: [{x: 0, y: 3}, {x: 1.3, y: 4}, {x: 3, y: 7}, {x: 3.5, y: 8}, {x: 4, y: 7}, {x: 4.5, y: 7}, {x: 5, y: 7.8}, {x: 5.5, y: 9}]
        }];
        /*
        ReactDOM.render(<ScatterPlot
                            data={data}
                            width={400}
                            height={400}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            tooltipHtml={tooltipScatter}
                        />,
        document.getElementById('scatterplot')
        );
        */
        ReactDOM.render(<AreaChart
                            data={data}
                            width={400}
                            height={400}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            tooltipHtml={tooltipArea}
                        />,
        document.getElementById('areachart')
        );

        data = [{
        label: 'somethingA',
        values: [{x: 0, y: 3}, {x: 1.3, y: -4}, {x: 3, y: 7}, {x: -3.5, y: 8}, {x: 4, y: 7}, {x: 4.5, y: 7}, {x: 5, y: -7.8}, {x: 5.5, y: 9}, {x: -3.2, y: 5.6}]
        }];

        ReactDOM.render(<ScatterPlot
                            data={data}
                            width={400}
                            height={400}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            tooltipHtml={tooltipScatter}
                            xAxis={{innerTickSize: 6, label: "x-label"}}
                            yAxis={{label: "y-label"}}
                        />,
        document.getElementById('scatterplot3')
        );

        data = [{
        label: 'somethingA',
        values: [{x: -4, y: -3}, {x: -3.1, y: -2}, {x: -2, y: 0.5}, {x: -1, y: -1}, {x: 0, y: 0}, {x: 1, y: 1.5}, {x: 1.9, y: 2}, {x: 3, y: 4}, {x: 4, y: 5.6}]
        }];

        ReactDOM.render(<LineChart
                            data={data}
                            width={300}
                            height={300}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            tooltipHtml={tooltipLine}
                            xAxis={{innerTickSize: 6, label: "x-label"}}
                            yAxis={{label: "y-label"}}
                        />,
        document.getElementById('linechart2')
        );

        /*
        data = [{
        customLabel: 'somethingA',
        customValues: [[0, 3], [1.3, 4], [3, 7], [3.5, 8], [4, 7], [4.5, 7],  [5, 7.8]]
        }];

        var labelAccessor = function(stack) { return stack.customLabel; };
        var valuesAccessor = function(stack) { return stack.customValues; };
        var xAccessor = function(element) { return element[0]; };
        var yAccessor = function(element) { return element[1]; };

        ReactDOM.render(<ScatterPlot
                            data={data}
                            width={400}
                            height={400}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            label={labelAccessor}
                            x={xAccessor}
                            y={yAccessor}
                            values={valuesAccessor}
                            tooltipHtml={tooltipScatter}/>,
        document.getElementById('scatterplot4')
        );

        ReactDOM.render(<AreaChart
                            data={data}
                            width={400}
                            height={400}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            interpolate={"basis"}
                            label={labelAccessor}
                            x={xAccessor}
                            y={yAccessor}
                            values={valuesAccessor}
                            tooltipHtml={tooltipArea}/>,
        document.getElementById('areachart2')
        );

        ReactDOM.render(<LineChart
                            data={data}
                            width={400}
                            height={400}
                            margin={{top: 10, bottom: 50, left: 50, right: 10}}
                            label={labelAccessor}
                            x={xAccessor}
                            y={yAccessor}
                            values={valuesAccessor}
                            tooltipHtml={tooltipLine}/>,
        document.getElementById('linechart2')
    );
    */
  </script>
</body>
</html>
